<template>
  <view class="page">
    <!-- <CustomTop title="消息" /> -->
    <view class="read" @tap="onOneKeyRead">
      <view class="flex justify-center">
        <image :src="ImgIconCleanBlack" />
      </view>
      <view class="text-center">一键已读</view>
    </view>
    <view class="tabs">
      <view
        class="tab"
        v-for="(item, index) of $data.tabs"
        :key="index"
        @tap="jump(item)"
      >
        <view class="tab-icon">
          <image :src="item.icon" />
          <view class="tag" v-if="item.num > 0">{{ item.num }}</view>
        </view>
        <view class="tab-content">
          <view class="tab-content_title">
            {{ item.label }}
          </view>
          <view v-if="item.desc" class="tab-content_desc u-line-1">
            {{ item.desc }}
          </view>
        </view>
      </view>
    </view>
    <PopupCSPhone v-model:show="$data.csphoneShow" title="官方客服电话" />
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick } from "vue";
import {
  onLoad,
  onShow,
  onHide,
  onReady,
  onPageScroll,
  onReachBottom,
  onPullDownRefresh,
  onShareAppMessage,
  onShareTimeline,
  onTabItemTap,
} from "@dcloudio/uni-app";
import BasicConfig from "@/utils/config";
import CustomTop from "../../components/CustomTop.vue";
import {
  ImgIconCleanBlack,
  ImgIconCustomServiceColor,
  ImgIconDiscountColor,
  ImgIconNoticeColor,
} from "../../utils/iconMap";
import { getCustomBar } from "../../utils/utils";
import { myMessage, readAllMessage } from "../../api/Interface/message";
import errorCode from "../../utils/http/errorCode";
import PopupCSPhone from "../../components/PopupCSPhone.vue";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $data = reactive({
  top: "",
  barHeight: "",
  tabs: [
    {
      key: "kf",
      label: "官方客服",
      icon: ImgIconCustomServiceColor,
      desc: "",
      num: 0,
    },
    {
      key: "cx",
      label: "优惠促销",
      icon: ImgIconDiscountColor,
      desc: "",
      num: 0,
    },
    {
      key: "tz",
      label: "系统通知",
      icon: ImgIconNoticeColor,
      desc: "",
      num: 0,
    },
  ],
  csphoneShow: false,
});
onLoad((options) => {
  $data.top = getCustomBar() * 2 + 20 + "px";
  $data.barHeight = getCustomBar() + "px";
});
onShow(() => {
  init();
});
const init = () => {
  myMessage().then((res) => {
    if (res.code === errorCode.success) {
      const { sales_info, sales_red_count, user_info, user_red_count } =
        res.data;
      const cxObj = $data.tabs.find((t) => t.key === "cx");
      cxObj.desc = sales_info;
      cxObj.num = sales_red_count;
      const tzObj = $data.tabs.find((t) => t.key === "tz");
      tzObj.desc = user_info;
      tzObj.num = user_red_count;
    }
  });
};
const onOneKeyRead = () => {
  uni.showModal({
    content: "确认全部消息已读?",
    confirmColor: BasicConfig.MainColor,
    success: (success) => {
      if (success.confirm) {
        readAllMessage().then((res) => {
          BasicConfig.toast(res.msg);
          if (res.code === errorCode.success) {
            init();
          }
        });
      }
    },
  });
};
const jump = (e) => {
  const { key } = e;
  switch (key) {
    case "kf":
      $data.csphoneShow = true;
      break;
    case "cx":
      uni.navigateTo({
        url: "/package-my/pages/message/discount",
      });
      break;
    case "tz":
      uni.navigateTo({
        url: "/package-my/pages/message/system",
      });
      break;
    default:
      break;
  }
};
onShareAppMessage(() => {});
onShareTimeline(() => {});
</script>

<style lang="scss" scoped>
.page {
  background: #ffffff;
  width: 100vw;
  min-height: 100vh;
  position: relative;
  .read {
    position: absolute;
    width: 120rpx;
    left: 30rpx;
    top: v-bind("$data.barHeight");

    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
  .tabs {
    margin-top: 30rpx;
    .tab {
      display: flex;
      align-items: center;
      padding: 30rpx;
      &-icon {
        width: 100rpx;
        height: 100rpx;
        position: relative;
        image {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
        .tag {
          position: absolute;
          top: 0;
          right: 0;
          background: #e61111;
          color: #ffffff;
          border-radius: 100%;
          width: 30rpx;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
        }
      }
      &-content {
        width: calc(100% - 120rpx);
        padding-left: 30rpx;
        &_title {
          font-size: 34rpx;
          font-weight: 700;
        }
        &_desc {
          font-size: 30rpx;
          color: #999999;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>
